<template>
  <view class="page">
    <view class="sticky-header">
      <view class="header">
        行程确认
      </view>
    </view>

    <view class="content">
      <view class="card">
        <view class="card-header">
          <uni-icons type="calendar" size="20" color="#3B82F6"/>
          <text class="card-title">行程安排</text>
        </view>
        <view class="schedule-list">
          <view class="schedule-item">
            <text class="time">上午</text>
            <text class="desc">乘船前往万山岛</text>
          </view>
          <view class="schedule-item">
            <text class="time">中午</text>
            <text class="desc">在"碧海鱼排"享用午餐</text>
          </view>
          <view class="schedule-item">
            <text class="time">下午</text>
            <text class="desc">开始"海钓"活动</text>
          </view>
          <view class="schedule-item">
            <text class="time">晚上</text>
            <text class="desc">返回"万山渔家乐"休息</text>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <uni-icons type="list" size="20" color="#3B82F6"/>
          <text class="card-title">费用明细</text>
        </view>
        <view class="fee-list">
          <view class="fee-item">
            <text class="fee-name">船票</text>
            <text class="fee-value">¥100/人</text>
          </view>
          <view class="fee-item">
            <text class="fee-name">午餐套餐</text>
            <text class="fee-value">¥150/人</text>
          </view>
          <view class="fee-item">
            <text class="fee-name">海钓费用</text>
            <text class="fee-value">¥200/人</text>
          </view>
          <view class="fee-item">
            <text class="fee-name">海景酒店住宿</text>
            <text class="fee-value">¥500/晚</text>
          </view>
          <view class="fee-summary">
            <view class="fee-line">
              <text class="fee-name">原价</text>
              <text class="fee-original">¥1378</text>
            </view>
            <view class="fee-line">
              <text class="fee-name">优惠金额</text>
              <text class="fee-discount">-¥428</text>
            </view>
            <view class="fee-line">
              <text class="fee-name-highlight">实付金额</text>
              <text class="fee-final">¥950</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <uni-icons type="person" size="20" color="#3B82F6"/>
          <text class="card-title">游客信息</text>
        </view>
        <view class="input-wrapper">
          <input type="number" v-model="phone" class="phone-input" placeholder="请输入手机号码"/>
          <view class="clear-icon" @click="clearPhone" v-if="phone">
            <uni-icons type="clear" size="20" color="#999"/>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-header">
          <uni-icons type="chatboxes" size="20" color="#3B82F6"/>
          <text class="card-title">备注信息</text>
        </view>
        <textarea v-model="remark" class="remark-input" placeholder="请输入特殊需求或注意事项"/>
      </view>

      <view class="card">
        <view class="card-header">
          <uni-icons type="wallet" size="20" color="#3B82F6"/>
          <text class="card-title">支付方式</text>
        </view>
        <view class="payment-list">
          <view class="payment-item" :class="{'selected': selectedPayment === 'wechat'}" @click="selectPayment('wechat')">
            <view class="payment-info">
              <uni-icons type="weixin" size="24" color="#07C160"/>
              <text class="payment-name">微信支付</text>
            </view>
            <uni-icons v-if="selectedPayment === 'wechat'" type="checkbox-filled" size="20" color="#3B82F6"/>
          </view>
          <view class="payment-item" :class="{'selected': selectedPayment === 'alipay'}" @click="selectPayment('alipay')">
            <view class="payment-info">
              <uni-icons type="wallet" size="24" color="#1677FF"/>
              <text class="payment-name">支付宝</text>
            </view>
            <uni-icons v-if="selectedPayment === 'alipay'" type="checkbox-filled" size="20" color="#3B82F6"/>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <button class="confirm-btn" @click="handleConfirmPayment">确认支付 ¥750</button>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user';
import { ref } from 'vue';

const phone = ref('13800138000');
const remark = ref('');
const selectedPayment = ref('wechat');

const clearPhone = () => {
  phone.value = '';
};

const selectPayment = (payment) => {
  selectedPayment.value = payment;
};

const handleConfirmPayment = () => {

  const userStore = useUserStore();
  console.log(userStore.token);
  
  // 调用支付接口
  uni.request({
    url: 'http://island.zhangshuiyi.com/island/front/order/payOrder',
    method: 'POST',
    data: {
      orderSn:'',
    },
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-Access-Token': userStore.token
    },
    success: (res) => {
      // 支付成功
      console.log(res.data);
      if(res.data.success === true){
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        });

        // 跳转到支付成功页面

        // 获取订单信息
        
      }else{
        // 提示失败原因
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        });

      }
    },
    fail: (err) => {
      // 支付失败
      // 提示用户支付失败
      uni.showToast({
        title: '支付失败',
        icon: 'none'
      });
    }
  });

  uni.navigateTo({
    url: '/pages/pay_success/pay_success'
  });
};
</script>

<style>
page {
  height: 100%;
  background-color: #f5f5f5;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
}

.content {
  flex: 1;
  padding: 32rpx;
  overflow-y: auto;
}

.card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.card-title {
  margin-left: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.schedule-item {
  display: flex;
}

.time {
  width: 120rpx;
  font-size: 26rpx;
  color: #666666;
}

.desc {
  flex: 1;
  font-size: 26rpx;
}

.fee-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
}

.fee-name {
  color: #666666;
}

.fee-summary {
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1px solid #f0f0f0;
}

.fee-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.fee-original {
  font-size: 26rpx;
  color: #999999;
  text-decoration: line-through;
}

.fee-discount {
  font-size: 26rpx;
  color: #ff4d4f;
}

.fee-name-highlight {
  font-size: 28rpx;
  font-weight: 500;
}

.fee-final {
  font-size: 36rpx;
  font-weight: 500;
  color: #3B82F6;
}

.input-wrapper {
  position: relative;
}

.phone-input {
  width: 100%;
  height: 88rpx;
  padding: 0 32rpx;
  border: 1px solid #e5e5e5;
  border-radius: 16rpx;
  font-size: 28rpx;
}

.clear-icon {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
}

.remark-input {
  width: 100%;
  height: 180rpx;
  padding: 24rpx;
  border: 1px solid #e5e5e5;
  border-radius: 16rpx;
  font-size: 28rpx;
}

.payment-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border: 1px solid #e5e5e5;
  border-radius: 16rpx;
}

.payment-item.selected {
  border-color: #3B82F6;
}

.payment-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.payment-name {
  font-size: 28rpx;
}

.bottom-bar {
  padding: 32rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  background-color: #3B82F6;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>